<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #1e1ec6;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial, sans-serif;
        }
        /* 存在id属性的元素 选中
         a[属性名]{}
         a[属性名=属性值（正则）]{}

       a[id] {
            background: yellow;
        }
        a[id=first] {
            background: green;
        }*/

        /* 存在class属性的元素 且有Links的元素 选中
         a[属性=值]{}
         = 绝对等于
         *= 包含
         ^= 以...开头
         $= 以...结尾
        a[class *="links"] {
            background: #aa290c;
        }*/
        /* 选中href中以http开头的元素
         a[href^="http"]{}
        a[href^="http"] {
            background: #c6591e;
        }*/
        /* 选中href中以pdf结尾的元素
         a[href$="images"]{}*/
        a[href$="doc"]{
            background: #1ec659;
        }
        /* 存在class属性的元素 选中
         a[属性~=值]{}
        a[class~="item"] {
            background: #c6c61e;
        } */
        /* 存在title属性的元素 选中
         a[title]{}

        a[title] {
            background: #1ec6c6;
        }*/
        /* 存在target属性的元素 选中
         a[target]{}

        a[target] {
            background: #c61ec6;
        } */
    </style>
</head>
<body>
<p class="demo">
    这是一个简单的HTML页面示例。您可以在这里添加更多内容。
  <a href="https://www.example.com" class="links item first" id="first">A1</a>
  <a href="http://www.cranewh.com" class="links item active" target="_blank" title="test">A2</a>
  <a href="images/123.html" class="links item">A3</a>
  <a href="images/123.png"  class="links item">A4</a>
  <a href="images/123.jpg" class="links item">A5</a>
  <a href="abc" class="links item">A6</a>
  <a href="/a.pdf" class="links item">A7</a>
  <a href="/abc.pdf" class="links item">A8</a>
  <a href="abc.doc" class="links item">A9</a>
  <a href="abcd.doc" class="links item last">A10</a>
</p>
</body>
</html>